<template>
	<view>
		<!-- 搜索栏 -->
		<view style="background-color: #fafafa; margin: 5rpx 5rpx 0"><input style="font-size: 35rpx; " type="text"
				v-model="searchGoods" placeholder="在此输入搜索的商品" @input="goSearch()" /></view>
		<!-- 公告 -->
		<div
			style="padding: 0 10rpx; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:#9d9d9d; height: 50rpx; line-height: 50rpx; font-size: 35rpx;">
			{{ shopInfo && shopInfo.notice ? shopInfo.notice : ""}}
		</div>
		<!-- 菜单列表 -->
		<div style="position: absolute; display: flex; height: calc(100% - 100rpx); width: 100%;">
			<view
				style="background-color: #fafafa; width:250rpx; text-align: center; overflow-x: hidden; line-height:65rpx;">
				<view v-for="(menu, index) in menuList" :key="index" @click="changeMenu(index)"
					:style="index === clickIndex ? 'color: green; background-color: white;' : ''">
					{{ menu.name }}
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 100%;" :scroll-into-view="scrollIntoView" @scroll="onScroll">
				<view v-for="(menu, index) in menuList" :key="index">
					<view style="background: #fafafa; text-align:left; padding-left:20rpx;" :id="'id' + index"
						class="menuCategory">{{ menu.name }}</view>
					<view v-for="(goods, goodsIndex) in menu.goodsList" :key="goodsIndex" style="display: flex;">
						<view @tap="showGoodsInfo(goods)" style="padding:10rpx;">
							<image :src="goods.image" style="width: 130rpx; height: 130rpx;"></image>
						</view>
						<view style="display: flex; flex-direction: column; width: 100%;">
							<view>{{ goods.name }}</view>
							<view style="color: gray; font-size:80%;">已售{{ Math.floor(goods.count / 10) }}件</view>
							<view
								style="display:flex; justify-content:space-between; padding:30rpx 15rpx 15rpx 0; border-bottom:1px solid #f4f4f4;">
								<view style="color: red; font-weight: bold;">￥{{ goods.price / 100 }}</view>
								<view v-if="(!goods.propertyList || goods.propertyList.length == 0) && goods.count == 0"
									style="text-decoration: line-through; color: #aaa;">
									已售空
								</view>
								<view v-else-if="goods.propertyList && goods.propertyList.length > 0"
									@tap="showGoodsInfo(goods)"
									style="width: 100rpx; font-size: 30rpx; height: 40rpx; line-height: 40rpx; text-align: center; background-color: red; color: white;">
									选规格
								</view>
								<view v-else @tap="
										() => {
											showGoodsInfo(goods);
											addCurGoodsToCart();
										}
									" style="width: 50rpx; height: 50rpx; line-height: 45rpx; font-size: 50rpx; text-align: center; border-radius: 50%; background-color: red; color: white; ">
									+
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</div>

		<!-- 商品信息弹窗 -->
		<view v-if="flagShowGoodsInfo" @tap="flagShowGoodsInfo = false"
			style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; background-color: black; opacity: 0.4;">
		</view>
		<view v-if="flagShowGoodsInfo"
			style="position:absolute; top:100rpx; left:5%; width:90%; height: 800rpx; z-index: 100; background-color: white;">
			<view style="float:right;" @tap="flagShowGoodsInfo = false">
				<image src="@/static/img/close.png" style="width:100rpx; height:100rpx;"></image>
			</view>
			<!-- 商品图片，名称，介绍 -->
			<view style="display:flex;">
				<view>
					<image :src="curGoods.image" style="width:180rpx; height:180rpx; margin:15rpx;"></image>
				</view>
				<div style="width:420rpx; font-size:30rpx; color: gray;">
					<div style="padding: 15rpx 0 5rpx;">{{ curGoods.name }}</div>
					<div>库存{{ curGoods.remainCount }}</div>
					<view
						style="height:100rpx; margin-top:7rpx; font-size:20rpx; overflow:hidden; text-overflow:ellipsis;">
						{{ curGoods.description }}
					</view>
				</div>
			</view>
			<!-- 商品规格 -->
			<view style="overflow-y: scroll; height:470rpx;">
				<view v-for="(property, index) in curGoods.propertyList" :key="index" style="padding-left:10rpx;">
					<view style="margin-left:10rpx;">
						<span v-if="property.isMain || property.required" style="color:red">*</span>
						{{ property.name }}
					</view>
					<view style="display:flex; flex-wrap:wrap;">
						<text v-for="(option, optionIndex) in property.options" :key="optionIndex"
							@tap="selectPropertyOption(property, option)"
							style="background-color: #f3f3f3; padding: 5rpx 18rpx;	margin: 5rpx 10rpx;" :style="
								(curGoods.propertyMap[property.name] == option.name ? 'color:blue; opacity:0.5' : '') +
									(option.disabled || (property.isMain && !(option.count > 0)) ? 'color: gray; text-decoration: line-through' : '')
							">
							{{ option.name }} {{ option.price > 0 ? '￥' + option.price / 100 : '' }}
						</text>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view
				style="display:flex; padding: 15rpx;flex-direction:column; justify-content:center; background-color:#f4f4f4;">
				<view style="">￥{{ curGoods.price / 100 }}</view>
				<view style="display:flex; justify-content:space-between; margin-top:5rpx;">
					<view
						style="color:grey; font-size:80%; width: 400rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
						{{ !curGoods.propertyStr ? '请选择规格' : curGoods.propertyStr }}
					</view>
					<view v-if="(!curGoods.propertyList || curGoods.propertyList.length == 0) && curGoods.count == 0"
						style="color:#aaa; padding:5rpx 30rpx; text-decoration: line-through;">
						已售空
					</view>
					<view v-else style="color:red; border:1px solid red; padding:5rpx 30rpx;" class="click"
						@tap="addCurGoodsToCart()">加入购物车</view>
				</view>
			</view>
		</view>

		<!-- 购物车组件 -->
		<cart :shopInfo="shopInfo"></cart>
	</view>
</template>

<script>
	import * as shopApi from '@/api/shopApi.js';
	import * as goodsApi from '@/api/goodsApi.js';
	import cart from './cart.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			cart
		},
		data() {
			return {
				searchGoods: "", // 搜索商品
				allMenus: [],
				menuList: [],
				flagShowGoodsInfo: false,
				curGoods: {
					goods: {}
				},
				shopInfo: {}, // 店铺信息

				// 联动菜单
				clickIndex: 0, // 切换class
				scrollIntoView: '', // scroll-view组件内部通过子节点的id实现动态滑动
				topList: [] // 所有节点的相对于scrollView的高度
			};
		},
		computed: {
			...mapState(['cart'])
		},
		onShow() {
			this.getGoodsMenuList();
		},
		methods: {
			...mapMutations(['addCartGoods', 'setCart']),
			getGoodsMenuList() {
				goodsApi.getGoodsMenuList({
					success: res => {
						this.allMenus = res.data;
						this.menuList = res.data;
					}
				});
				// 获取商铺信息
				shopApi.getShopInfo({
					success: res => {
						this.shopInfo = res.data;
					}
				});
			},
			// 打开搜索框
			goSearch() {
				let menuList = []
				for (let i = 0; i < this.allMenus.length; i++) {
					menuList.push({
						name: this.allMenus[i].name,
						goodsList: this.allMenus[i].goodsList.filter(goods => {
							return goods.name.indexOf(this.searchGoods) >= 0 || goods.description.indexOf(
								this.searchGoods) >= 0;
						})
					});
				}
				this.menuList = menuList;
			},
			// 显示商品信息弹窗
			showGoodsInfo(goods) {
				this.curGoods = JSON.parse(JSON.stringify(goods));
				this.curGoods.remainCount = goods.count; // 库存
				this.curGoods.propertyMap = {};
				this.flagShowGoodsInfo = true;
			},
			/**
			 * 选择具体属性
			 * @param {Object} property 商品属性
			 * @param {Object} option 属性选项
			 */
			selectPropertyOption(property, option) {
				if (option.disabled || (property.isMain && !(option.count > 0))) return;
				if (property.isMain) {
					this.curGoods.price = option.price;
					this.curGoods.remainCount = option.count; // 库存
					this.curGoods.propertyMap[property.name] = option.name;
				} else {
					if (this.curGoods.propertyMap[property.name] == option.name) this.curGoods.propertyMap[property.name] =
						undefined;
					else this.curGoods.propertyMap[property.name] = option.name;
				}
				this.genPropertyStr();
			},
			// 将当前物品加入购物车
			addCurGoodsToCart() {
				this.genPropertyStr();
				for (let i = 0; i < this.curGoods.propertyList.length; i++) {
					let property = this.curGoods.propertyList[i];
					if ((property.isMain || property.required) && !this.curGoods.propertyMap[property.name]) {
						this.$msg('请选择' + property.name);
						return;
					}
				}
				let cartGoods = JSON.parse(JSON.stringify(this.curGoods));
				cartGoods.goodsId = this.curGoods.id;
				cartGoods.count = 1; // 购买数量
				this.flagShowGoodsInfo = false;
				// console.debug('加入购物车, cartGoods:', cartGoods);
				this.addCartGoods(cartGoods);
			},
			// 生成选择的属性信息
			genPropertyStr() {
				if (this.curGoods.propertyList == null || this.curGoods.propertyList.length == 0) return;
				let propertyStr = '';
				for (let k in this.curGoods.propertyMap) {
					if (propertyStr.length > 0) propertyStr += ',';
					propertyStr += this.curGoods.propertyMap[k];
				}
				this.curGoods.propertyStr = propertyStr;
				this.curGoods = JSON.parse(JSON.stringify(this.curGoods)); // 强行更新视图
			},

			// 切换菜单
			changeMenu(index) {
				this.clickIndex = index;
				this.scrollIntoView = 'id' + index; // 利用uniapp组件的配置信息。
				setTimeout(() => {
					this.clickIndex = index;
				}, 50)
			},
			// 滑动菜单
			onScroll(options) {
				// options为滚动信息, options.detail.scrollTop值为相对于scroll-view的高度。
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.menuCategory')
					.boundingClientRect(data => {
						this.topList = data.map(item => {
							return Math.ceil(item.top);
						});
						this.syncLeftMenu(options);
					})
					.exec();
			},
			// 滑动的时同步左边菜单
			syncLeftMenu(options) {
				// console.log('topList:', JSON.stringify(this.topList));
				let first = options.detail.scrollTop + this.topList[0];
				for (let i = 0; i < this.topList.length; i++) {
					let node1 = this.topList[i];
					let node2 = this.topList[i + 1];
					// console.log("first", first, "node1", node1, "node2", node2)
					if (first >= node1 && first < node2) {
						this.clickIndex = i;
						break;
					} else if (first == node2) {
						this.clickIndex = i + 1;
						break;
					}
				}
			},
		}
	};
</script>

<style></style>
